<template>
	<view>
		<view class="container p-bottom" v-if="goods_list && goods_list.length ">

			<!-- 顶部选项卡 -->
			<view v-if=" isShowTab " class="swiper-tab dis-flex flex-y-center flex-x-around">
				<view v-for="(item,indexss) in DeliveryTypeEnum " :key="indexss" class="swiper-tab-item" :class=" curDelivery == item.value ? 'on' : '' "
				 :data-current=" item.value " @tap="onSwichDelivery">
					{{ item.name }}
				</view>
			</view>

			<!-- 快递配送：配送地址 -->
			<view v-if=" curDelivery == DeliveryTypeEnum.EXPRESS.value " @tap="onSelectAddress" class="flow-delivery">
				<view class="flow-delivery__detail dis-flex flex-y-center">
					<view class="detail-location dis-flex">
						<text class="iconfont icon-dingwei"></text>
					</view>
					<view class="detail-content flex-box">
						<block v-if="address && address.address_id ">
							<view class="detail-content__title dis-flex">
								<text class="f-30">{{ address.name }}</text>
								<text class="detail-content__title-phone f-28">{{ address.phone }}</text>
							</view>
							<view class="detail-content__describe">
								<text class="col-7">{{sheng}} {{shi}} {{region}}
									{{detail}}</text>
							</view>
						</block>
						<block v-else>
							<view class="detail-content__describe dis-flex">
								<text class="col-6">请选择配送地址</text>
							</view>
						</block>
					</view>
					<view class="detail-arrow dis-flex">
						<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
					</view>
				</view>
			</view>

			<!-- 上门自提：自提门店 -->
			<block v-if=" curDelivery == DeliveryTypeEnum.EXTRACT.value ">
				<view @tap="" class="flow-delivery">
					<view class="flow-delivery__detail dis-flex flex-y-center">
						<view class="detail-location dis-flex">
							<text class="iconfont icon-dingwei"></text>
						</view>
						<view class="detail-content flex-box">
							<block v-if=" extract_shop.shop_id ">
								<view class="detail-content__title dis-flex">
									<text class="f-30">{{ extract_shop.shop_name }}</text>
								</view>
								<view class="detail-content__describe">
									<text class="col-7">{{extract_shop.region.province}} {{extract_shop.region.city}} {{extract_shop.region.region}}
										{{extract_shop.address}}</text>
								</view>
							</block>
							<block v-else>
								<view class="detail-content__describe dis-flex">
									<text class="col-6">请选择自提点</text>
								</view>
							</block>
						</view>
						<view class="detail-arrow dis-flex">
							<!-- <text class="iconfont icon-xiangyoujiantou user-orderJtou"></text> -->
						</view>
					</view>
				</view>
				<!-- 自提联系方式 -->
				<view class="flow-extract-contact m-top20 b-f">
					<view class="contact-item dis-flex">
						<view class="item_label dis-flex flex-x-end flex-y-center">
							<text>团长：</text>
						</view>
						<view class="item_ipt flex-box dis-flex flex-y-center">
							<input disabled :value="tuanzhang"></input>
						</view>
					</view>
					<view class="contact-item dis-flex">
						<view class="item_label dis-flex flex-x-end flex-y-center">
							<text>联系人：</text>
						</view>
						<view class="item_ipt flex-box dis-flex flex-y-center">
							<input placeholder="请填写联系人姓名" @input="onInputLinkman" :value="linkman"></input>
						</view>
					</view>
					<view class="contact-item dis-flex">
						<view class="item_label dis-flex flex-x-end flex-y-center">
							<text>联系电话：</text>
						</view>
						<view class="item_ipt flex-box dis-flex flex-y-center">
							<input placeholder="请填写联系电话" @input="onInputPhone" :value="phone"></input>
						</view>
					</view>
				</view>
			</block>

			<!-- 商品列表 -->
			<view class="m-top20">
				<view class="checkout_list" v-for="(item,ity) in goods_list " :key="ity">
					<form @submit="onTargetGoods" :data-id=" item.goods_id " report-submit="true">
						<button form-type="submit" class="btn-normal" :data-index="ity">
							<view class="flow-shopList dis-flex">
								<!-- 商品图片 -->
								<view class="flow-list-left">
									<image mode="scaleToFill" :src="item.goods_image"></image>
								</view>
								<view class="flow-list-right flex-box">
									<!-- 商品名称 -->
									<text class="f-30 col-3 twolist-hidden">{{item.goods_name}}</text>
									<!-- 商品sku信息 -->
									<text class="f-24 col-7">{{item.goods_sku.goods_attr}}</text>
									<!-- 商品数量和单价 -->
									<view class="flow-list-cont dis-flex flex-x-between flex-y-center">
										<text class="small">×{{item.total_num}}</text>
										<text class="flow-cont" :class="item.is_user_grade ? 'price-delete' : ''">￥{{item.goods_price}}</text>
									</view>
									<!-- 会员折扣价 -->
									<view v-if="item.is_user_grade" class="grade-price">
										<text>会员折扣价：￥{{ item.grade_goods_price }}</text>
									</view>
								</view>
							</view>
						</button>
					</form>
				</view>

				<view class="flow-num-box b-f padding-box">
					<text>共{{order_total_num}}件商品，合计：</text>
					<text class="flow-money col-m">￥{{ order_total_price }}</text>
				</view>

			</view>

			<!-- 商品金额 -->
			<view class="flow-all-money b-f m-top20">
				<view class="dis-flex flow-all-list">
					<text class="flex-five">订单总金额：</text>
					<view class="flex-five t-r">
						<text class="col-m">￥{{ order_total_price }}</text>
					</view>
				</view>
				<view class="dis-flex flow-all-list">
					<text class="flex-five">优惠券：</text>
					<view class="flex-five t-r">
						<view @tap="onTogglePopupCoupon">
							<block v-if="coupon_list && coupon_list.length > 0">
								<text class="col-m" v-if="coupon_id > 0">-￥{{ coupon_money }}</text>
								<text class="col-m" v-else>有{{ coupon_list.length }}张优惠券可用</text>
								<text class="iconfont icon-xiangyoujiantou user-orderJtou"></text>
							</block>
							<text v-else class="">无优惠券可用</text>
						</view>
					</view>
				</view>
				<!-- 积分抵扣 -->
				<view v-if=" is_allow_points " class="points flow-all-list dis-flex flex-y-center">
					<view class="block-left flex-five">
						<form class="flex-five" @submit="onShowPoints" report-submit="true">
							<button form-type="submit" class="btn-normal">
								<text class="title">可用{{ setting.points_name }}抵扣：</text>
								<text class="iconfont icon-help"></text>
							</button>
						</form>
					</view>
					<view class="flex-five dis-flex flex-x-end flex-y-center">
						<text class="points-money col-m">￥{{ points_money }}</text>
						<van-switch :checked=" isUsePoints " size="48rpx" active-color="#07c160" @change="onTriggerPoints" />
					</view>
				</view>
				<!-- 配送费用 -->
				<view v-if="curDelivery == DeliveryTypeEnum.EXPRESS.value" class="dis-flex flow-all-list">
					<text class="flex-five">配送费用：</text>
					<view class="flex-five t-r">
						<view v-if="address && address.address_id">
							<text class="col-m" v-if="intra_region">+￥{{express_price}}</text>
							<text v-else>不在配送范围</text>
						</view>
						<view v-else>
							<text class="col-7">请先选择配送地址</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 支付方式 -->
			<view class="pay-method flow-all-money b-f m-top20">
				<view class="dis-flex flow-all-list">
					<text class="flex-five">支付方式</text>
				</view>
				<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" report-submit="true">
					<button form-type="submit" class="btn-normal">
						<view class="pay-item dis-flex flex-x-between">
							<view class="item-left dis-flex flex-y-center">
								<view class="item-left_icon wechat">
									<text class="iconfont icon-weixinzhifu"></text>
								</view>
								<view class="item-left_text">
									<text>{{ PayTypeEnum.WECHAT.name }}</text>
								</view>
							</view>
							<view class="item-right col-m" v-if="curPayType == PayTypeEnum.WECHAT.value">
								<text class="iconfont icon-duihao"></text>
							</view>
						</view>
					</button>
				</form>
				<form @submit="onSelectPayType" :data-value="PayTypeEnum.BALANCE.value" report-submit="true">
					<button form-type="submit" class="btn-normal">
						<view class="pay-item dis-flex flex-x-between">
							<view class="item-left dis-flex flex-y-center">
								<view class="item-left_icon balance">
									<text class="iconfont icon-qiandai"></text>
								</view>
								<view class="item-left_text">
									<text>{{ PayTypeEnum.BALANCE.name }}</text>
								</view>
							</view>
							<view class="item-right col-m" v-if="curPayType == PayTypeEnum.BALANCE.value ">
								<text class="iconfont icon-duihao"></text>
							</view>
						</view>
					</button>
				</form>
			</view>

			<!-- 买家留言 -->
			<view class="flow-all-money b-f m-top20">
				<view class="ipt-wrapper dis-flex flow-all-list">
					<input @input="bindRemark" placeholder="选填：买家留言（50字以内）" :value="remark"></input>
				</view>
			</view>

			<!-- 提交订单 -->
			<view class="flow-fixed-footer b-f m-top10">
				<view class="dis-flex chackout-box">
					<view class="chackout-left pl-12">实付款：
						<text class="col-m">￥{{ order_pay_price }}</text>
					</view>
					<view @tap="onSubmitOrder" class="chackout-right">
						<text class="flow-btn f-32">提交订单</text>
					</view>
				</view>
			</view>

			<!-- 优惠券弹出框 -->
			<!-- <zanpopup :show="showBottomPopup" type="bottom" bindclose="togglePopupCoupon"> -->
			<view class="pop pop--bottom" :class="[showBottomPopup ? 'pop--show' : '']" @close="togglePopupCoupon">
				<view class="pop__mask " @tap="handleMaskClick"></view>
				<view class="pop__container">
					<view class="popup__coupon">
						<view class="coupon__title f-32">选择优惠券</view>
						<!-- 优惠券列表 -->
						<view class="coupon-list">
							<scroll-view scroll-y="true" style="height: 565rpx;">
								<view class="coupon-item" v-for="(item,index) in coupon_list" :key="index">
									<view class="item-wrapper" :class="['color__'+item.color.text]" @tap="onSelectCoupon" :data-index="index"
									 :data-id="item.user_coupon_id">
										<view class="coupon-type">{{ item.coupon_type.text }}</view>
										<view class="tip dis-flex flex-dir-column flex-x-center">
											<view v-if="item.coupon_type.value == 10">
												<text class="f-30">￥</text>
												<text class="money">{{ item.reduce_price }}</text>
											</view>
											<text class="money" v-if="item.coupon_type.value == 20">{{ item.discount }}折</text>
											<text class="pay-line">满{{ item.min_price }}元可用</text>
										</view>
										<view class="split-line"></view>
										<view class="content dis-flex flex-dir-column flex-x-between">
											<view class="title">{{ item.name }}</view>
											<view class="bottom dis-flex flex-y-center">
												<view class="time flex-box">
													<text>有效期：{{ item.start_time.text }}~{{ item.end_time.text }}</text>
												</view>
												<!-- <view class="state flex-box">
                    <text>-￥{{ item.reduced_price }}</text>
                  </view> -->
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>

						<!-- 不使用优惠券 -->
						<view class="coupon__do_not dis-flex flex-y-center flex-x-center">
							<view class="control dis-flex flex-y-center flex-x-center" @tap="onNotUseCoupon">
								<text class="f-26">不使用优惠券</text>
							</view>
						</view>
						<!-- <view class="footer-fixed f-32">
        <view @tap="onTogglePopupCoupon" class="order-bt" style="width:100%">关闭</view>
      </view> -->
					</view>
				</view>
			</view>
			<!-- </zanpopup> -->

		</view>

		<!-- 快捷导航 -->
		<!-- <shortcut></shortcut> -->
		<!-- 积分说明弹框 -->
		<!-- zan-dialog组件无法使用 -->
		<!-- <zan-dialog id="zan-base-dialog"></zan-dialog> -->
	</view>

</template>

<script>
	// 工具类
	import Util from '../../utils/util.js';
	// 枚举类：发货方式
	import DeliveryTypeEnum from '../../utils/enum/DeliveryType.js';
	// 枚举类：支付方式
	import PayTypeEnum from '../../utils/enum/order/PayType';
	import shortcut from '../../components/goods/shortcut.vue'
	export default {
		components: {
			// （组件命名）
			shortcut,
		},
		data() {
			return {
				result: {},
				// 快捷导航
				nav_select: false,
				// 当前页面参数
				options: {},

				// // 系统设置：配送方式
				deliverySetting: [],

				// 系统设置
				setting: {
					delivery: [], // 支持的配送方式
				},

				// 配送方式
				isShowTab: false,
				DeliveryTypeEnum,
				curDelivery: null,

				// 支付方式
				PayTypeEnum,
				curPayType: PayTypeEnum.WECHAT.value,

				address: null, // 默认收货地址
				exist_address: false, // 是否存在收货地址

				selectedShopId: 0, // 选择的自提门店id
				linkman: '', // 自提联系人
				phone: '', // 自提联系电话

				// 商品信息
				goods: {},

				// 选择的优惠券
				selectCouponId: 0,
				// 是否使用积分抵扣
				isUsePoints: false,
				// 选择的优惠券
				selectCoupon: {
					index: null,
					couponId: null,
					reduced_price: '0.00'
				},

				// 买家留言
				remark: '',

				// 禁用submit按钮
				disabled: false,

				hasError: false,
				error: '',
				coupon_id: '',

				is_use_points:'',
				goods_list: {},
				order_total_num: null,
				order_total_price: null,
				coupon_list: {},
				coupon_money: '',
				intra_region: null,
				actual_pay_price: null,
				order_pay_price: null,
				express_price: null,
				showBottomPopup: null,
				delivery: null,
				pay_type: null,
				has_error: null,
				error_msg: null,
				extract_shop: null,
				last_extract: {},
				order_price: null,
				
				sheng:'',
				shi:'',
				region:'',
				detail:'',
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			let _this = this;
			// 当前页面参数
			_this.setData({
				options
			});
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			let _this = this;
			// 获取当前订单信息
			_this.getOrderData();

		},
		methods: {

			/**
			 * 获取当前订单信息
			 */
			getOrderData() {
				let _this = this,
					options = _this.options;

				// 获取订单信息回调方法
				let callback = result => {
					let resData = result.data;
					// 请求错误
					if (result.code !== 1) {
						_this.showError(result.msg);
						return false;
					}
					// 显示错误信息
					if (resData.has_error) {
						_this.hasError = true;
						_this.error = resData.error_msg;
						_this.showError(_this.error);
					}

					let data = {};
					// 当前选择的配送方式
					data.curDelivery = resData.delivery;
					// 如果只有一种配送方式则不显示选项卡
					data.isShowTab = resData.setting.delivery.length > 1;
					// 上门自提联系信息
					data.linkman = resData.last_extract.linkman;
					data.phone = resData.last_extract.phone;
					// 设置页面数据
					// console.log(resData);
					
					
					
					
					if (resData.address.region.city == '其他'){
						_this.sheng = resData.address.zhouname
						_this.shi = resData.address.shixianname
						_this.region = resData.address.region.region
						_this.detail = resData.address.detail
					}else{
						_this.sheng = resData.address.region.province
						_this.shi = resData.address.region.city
						_this.region = resData.address.region.region
						_this.detail = resData.address.detail
						
					}
					_this.setData(Object.assign({}, resData, data));

					uni.hideLoading();
					// return false;
				};

				uni.showLoading({
					title: '加载中...',
				});

				// 请求的参数
				let params = {
					delivery: _this.curDelivery || 0,
					shop_id: _this.selectedShopId || 0,
					coupon_id: _this.selectCouponId || 0,
					is_use_points: _this.isUsePoints ? 1 : 0,
				};


				// 立即购买
				if (options.order_type === 'buyNow') {
					_this._get('order/buyNow', Object.assign({}, params, {
						goods_id: options.goods_id,
						goods_num: options.goods_num,
						goods_sku_id: options.goods_sku_id,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					}), result => {
						callback(result);
					});
				}
				// 砍价活动结算
				else if (options.order_type === 'bargain') {
					_this._get('bargain.order/checkout', Object.assign({}, params, {
						task_id: options.task_id,
						goods_sku_id: options.goods_sku_id,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					}), result => {
						callback(result);
					});
				}
				// 秒杀活动结算
				else if (options.order_type === 'sharp') {
					_this._get('sharp.order/checkout', Object.assign({}, params, {
						active_time_id: options.active_time_id,
						sharp_goods_id: options.sharp_goods_id,
						goods_sku_id: options.goods_sku_id,
						goods_num: options.goods_num,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					}), result => {
						callback(result);
					});
				}
				// 购物车结算
				else if (options.order_type === 'cart') {
					_this._get('order/cart', Object.assign({}, params, {
						cart_ids: options.cart_ids || 0,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					}), result => {
						callback(result);
					});
				}

			},

			/**
			 * 切换配送方式
			 */
			onSwichDelivery(e) {
				// 设置当前配送方式
				let _this = this,
					curDelivery = e.currentTarget.dataset.current;
				_this.setData({
					curDelivery
				});
				// 重新获取订单信息
				_this.getOrderData();
			},


			/**
			 * 快递配送：选择收货地址
			 */
			onSelectAddress() {
				uni.navigateTo({
					url: '../address/' + (this.exist_address ? 'index?from=flow' : 'create')
				});
			},

			/**
			 * 上门自提：选择自提点
			 */
			onSelectExtractPoint() {
				let _this = this,
					selectedId = _this.selectedShopId;
				uni.navigateTo({
					url: '../shopSelect/extract_point/shopSelect?selected_id=' + selectedId
				});
			},

			/**
			 * 跳转到商品详情页
			 */
			onTargetGoods(e) {
				uni.navigateTo({
					url: '../goods/index?goods_id=' + e.currentTarget.dataset.id,
				})
			},

			/**
			 * 订单提交
			 */
			onSubmitOrder() {
				let _this = this,
					options = _this.options;

				if (_this.disabled) {
					return false;
				}

				// 表单验证
				if (!_this._onVerify()) {
					return false;
				}

				// 订单创建成功后回调--微信支付
				let callback = result => {
					if (result.code === -10) {
						_this.showError(result.msg, () => {
							_this.redirectToOrderIndex();
						});
						return false;
					}

					// 发起微信支付
					if (result.data.pay_type == PayTypeEnum.WECHAT.value) {

						_this.wxPayment({
							payment: result.data.payment,
							success: res => {
								_this.redirectToOrderIndex();
							},
							fail: res => {
								_this.showError(result.msg.error, () => {
									_this.redirectToOrderIndex();
								});
							},
						});

					}
					// 余额支付
					if (result.data.pay_type == PayTypeEnum.BALANCE.value) {
						_this.showSuccess(result.msg.success, () => {
							_this.redirectToOrderIndex();
						});
					}
				};

				// 按钮禁用, 防止二次提交
				_this.disabled = true;

				// 显示loading
				uni.showLoading({
					title: '正在处理...'
				});


				let url = '';

				// 表单提交的数据
				let postData = {
					delivery: _this.curDelivery,
					pay_type: _this.curPayType,
					shop_id: _this.selectedShopId || 0,
					linkman: _this.linkman,
					phone: _this.phone,
					coupon_id: _this.selectCouponId || 0,
					is_use_points: _this.isUsePoints ? 1 : 0,
					remark: _this.remark || '',
				};

				// 创建订单-立即购买
				if (options.order_type === 'buyNow') {
					url = 'order/buyNow';
					postData = Object.assign(postData, {
						goods_id: options.goods_id,
						goods_num: options.goods_num,
						goods_sku_id: options.goods_sku_id,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					});
				}

				// 创建订单-购物车结算
				if (options.order_type === 'cart') {
					url = 'order/cart';
					postData = Object.assign(postData, {
						cart_ids: options.cart_ids || 0,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					});
				}

				// 创建订单-砍价活动
				if (options.order_type === 'bargain') {
					url = 'bargain.order/checkout';
					postData = Object.assign(postData, {
						task_id: options.task_id,
						goods_sku_id: options.goods_sku_id,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					});
				}
				// 创建订单-秒杀活动
				if (options.order_type === 'sharp') {
					url = 'sharp.order/checkout';
					postData = Object.assign(postData, {
						active_time_id: options.active_time_id,
						sharp_goods_id: options.sharp_goods_id,
						goods_sku_id: options.goods_sku_id,
						goods_num: options.goods_num,
						// #ifdef APP-PLUS
						posttype: "android",
						// #endif
					});
				}

				// 订单提交
				// console.log(JSON.stringify(postData));return false;
				_this._post_form(url, postData, result => {
					callback(result);
				}, result => {}, () => {
					uni.hideLoading();
					// 解除按钮禁用
					_this.disabled = false;
				});

			},
			/**
			 * 表单验证
			 */
			_onVerify() {
				let _this = this;
				if (_this.hasError) {
					_this.showError(_this.error);
					return false;
				}
				// 验证自提填写的联系方式
				if (_this.curDelivery == DeliveryTypeEnum.EXTRACT.value) {
					_this.setData({
						linkman: _this.linkman.trim(),
						phone: _this.phone.trim(),
					});
					if (_this.selectedShopId <= 0) {
						_this.showError('请选择自提的门店');
						return false;
					}
					if (Verify.isEmpty(_this.linkman)) {
						_this.showError('请填写自提联系人');
						return false;
					}
					if (Verify.isEmpty(_this.phone)) {
						_this.showError('请填写自提联系电话');
						return false;
					}
					if (!Verify.isPhone(_this.phone)) {
						_this.showError('请输入正确的联系电话');
						return false;
					}
				}
				return true;
			},

			/**
			 * 买家留言
			 */
			bindRemark(e) {
				let _this = this;
				_this.setData({
					remark: e.detail.value
				})
			},

			/**
			 * 选择优惠券(弹出/隐藏)
			 */
			onTogglePopupCoupon() {
				let _this = this;
				if (_this.coupon_list.length > 0) {
					_this.setData({
						showBottomPopup: !_this.showBottomPopup
					});
				}
			},

			/**
			 * 选择优惠券
			 */
			onSelectCoupon(e) {
				let _this = this;
				// 记录选中的优惠券id
				_this.setData({
					selectCouponId: e.currentTarget.dataset.id
				});
				// 重新获取订单信息
				_this.getOrderData();
				// 隐藏优惠券弹层
				_this.onTogglePopupCoupon();
			},

			/**
			 * 不使用优惠券
			 */
			onNotUseCoupon() {
				let _this = this;
				_this.setData({
					selectCouponId: 0
				});
				// 重新获取订单信息
				_this.getOrderData();
				// 隐藏优惠券弹层
				_this.onTogglePopupCoupon();
			},

			/**
			 * 选择支付方式
			 */
			onSelectPayType(e) {
				let _this = this;
				// 记录formId
				_this.saveFormId(e.detail.formId);
				// 设置当前支付方式
				_this.setData({
					curPayType: e.currentTarget.dataset.value
				});
			},

			/**
			 * 跳转到未付款订单
			 */
			redirectToOrderIndex() {
				uni.redirectTo({
					url: '/pages/order/index',
				});
			},

			/**
			 * input绑定：联系人
			 */
			onInputLinkman(e) {
				let _this = this;
				_this.setData({
					linkman: e.detail.value
				});
			},

			/**
			 * input绑定：联系电话
			 */
			onInputPhone(e) {
				let _this = this;
				_this.setData({
					phone: e.detail.value
				});
			},
		}

	}
</script>

<style>
	@charset "UTF-8";

	/* 选项卡 */

	.swiper-tab {
		width: 100%;
		text-align: center;
		height: 85upx;
		background-color: #fff;
		border-bottom: 1px solid rgb(248, 248, 248);
	}

	.swiper-tab .swiper-tab-item {
		width: 35%;
		height: 100%;
		font-size: 28upx;
		color: #777;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;
		border-bottom: 2px solid #ffffff00;
	}

	.swiper-tab .on {
		color: #fd4a5f;
		border-bottom: 2px solid #fd4a5f;
	}

	/* 配送信息 */

	.flow-delivery {
		padding: 34upx 30upx;
		background: #fff url('') bottom left repeat-x;
		background-size: 120upx auto;
	}

	.detail-content {
		padding: 0 20upx;
	}

	.detail-content__title {
		margin-bottom: 6upx;
	}

	.detail-content .detail-content__title-phone {
		margin-left: 10upx;
	}

	.detail-content .detail-content__describe {
		font-size: 28upx;
	}

	/* 买家留言 */

	.flow-all-money .ipt-wrapper input {
		width: 100%;
		height: 75upx;
	}

	/* 商品列表 */

	.checkout_list {
		padding: 20upx 30upx 4upx 30upx;
		background: #fff;
		border-bottom: 1upx solid rgb(248, 248, 248);
	}

	.checkout_list .flow-shopList {
		padding: 5upx 0 10upx;
		border-bottom: 1upx solid rgb(248, 248, 248);
	}

	.checkout_list .flow-shopList:last-child {
		border-bottom: 0;
	}

	.flow-header-left {
		padding-left: 90upx;
	}

	/* 会员价 */

	.flow-shopList .flow-list-right .flow-cont.price-delete {
		font-size: 26upx;
		color: #777;
		text-decoration: line-through;
	}

	.flow-shopList .grade-price {
		padding-top: 8upx;
		font-size: 28upx;
		color: #ff495e;
		text-align: right;
	}

	/* 优惠券选择 */

	.popup__coupon {
		width: 750upx;
		background: #fff;
		box-sizing: border-box;
		padding: 30upx;
	}

	.popup__coupon .coupon__do_not .control {
		width: 90%;
		height: 72upx;
		margin-bottom: 24upx;
		color: #888;
		border: 1upx solid #e3e3e3;
		border-radius: 10upx;
	}

	.popup__coupon .coupon__title {
		text-align: center;
		margin-bottom: 30upx;
	}

	.popup__coupon .coupon-list .coupon-item {
		position: relative;
		overflow: hidden;
		margin-bottom: 22upx;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper {
		display: flex;
		background: #fff;
		border-radius: 8upx;
		color: #fff;
		height: 170upx;
		overflow: hidden;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .coupon-type {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 10;
		width: 128upx;
		padding: 3px 0;
		background: #a771ff;
		font-size: 20upx;
		text-align: center;
		color: #fff;
		transform: rotate(45deg);
		transform-origin: 64upx 64upx;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper.color__blue {
		background: linear-gradient(-125deg, #57bdbf, #2f9de2);
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper.color__red {
		background: linear-gradient(-128deg, #ff6d6d, #ff3636);
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper.color__violet {
		background: linear-gradient(-113deg, #ef86ff, #b66ff5);
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper.color__violet .coupon-type {
		background: #55b5ff;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper.color__yellow {
		background: linear-gradient(-141deg, #f7d059, #fdb054);
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .tip {
		position: relative;
		flex: 0 0 32%;
		text-align: center;
		border-radius: 8px 0 0 8px;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .tip .money {
		font-weight: bold;
		font-size: 46upx;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .tip .pay-line {
		font-size: 22upx;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line {
		position: relative;
		flex: 0 0 0;
		border-left: 4upx solid #fff;
		margin: 0 5px 0 3px;
		background: #fff;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:before,
	.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:after {
		content: '';
		position: absolute;
		width: 12px;
		height: 6px;
		background: #fff;
		left: -7px;
		z-index: 1;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:before {
		border-radius: 0 0 8px 8px;
		top: 0;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .split-line:after {
		border-radius: 8px 8px 0 0;
		bottom: 0;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .content {
		flex: 1;
		padding: 30upx 20upx;
		border-radius: 8px 0 0 8px;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .content .title {
		font-size: 34upx;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .content .bottom .time {
		font-size: 24upx;
		line-height: 24upx;
	}

	.popup__coupon .coupon-list .coupon-item .item-wrapper .content .bottom .state {
		height: 46upx;
		width: 122upx;
		line-height: 92upx;
		text-align: center;
		color: #fff;
		font-size: 26upx;
	}
	/* 积分抵扣 */
	
	.points .title {
	  margin-right: 5upx;
	}
	
	.points .icon-help {
	  font-size: 28upx;
	}
	
	.points .points-money {
	  margin-right: 20upx;
	}

	/* 支付方式 */

	.pay-method .pay-item {
		padding: 20upx 0;
		font-size: 28upx;
		border-bottom: 1upx solid rgb(248, 248, 248);
	}

	.pay-method .pay-item .item-left_icon {
		margin-right: 20upx;
		font-size: 32upx;
	}

	.pay-method .pay-item .item-left_icon.wechat {
		color: #00c800;
	}

	.pay-method .pay-item .item-left_icon.balance {
		color: #ff9700;
	}

	/* 门店自提联系人 */

	.flow-extract-contact {
		padding: 8upx 24upx;
		font-size: 28upx;
		color: #444;
	}

	.flow-extract-contact .contact-item {
		padding: 10upx 0;
		border-bottom: 1upx solid rgb(248, 248, 248);
	}

	.flow-extract-contact .contact-item:last-child {
		border-bottom: none;
	}

	.flow-extract-contact .item_label {
		margin-right: 26upx;
		width: 150upx;
	}

	.flow-extract-contact .item_ipt input {
		font-size: 28upx;
		width: 100%;
	}

	.flow-extract-contact .item_ipt .input-placeholder {
		font-size: 28upx;
	}

	.pop {
		visibility: hidden
	}

	.pop--show {
		visibility: visible
	}

	.pop__mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 14;
		background: rgba(0, 0, 0, .5);
		display: none
	}

	.pop__mask--hide {
		background: 0 0
	}

	.pop__container {
		position: fixed;
		left: 50%;
		top: 50%;
		-webkit-transform: translate3d(-50%, -50%, 0);
		transform: translate3d(-50%, -50%, 0);
		-webkit-transform-origin: center;
		transform-origin: center;
		-webkit-transition: all .2s ease;
		transition: all .2s ease;
		z-index: 15;
		opacity: 0
	}

	.pop--show .pop__container {
		opacity: 1
	}

	.pop--show .pop__mask {
		display: block
	}

	.pop--left .pop__container {
		left: 0;
		top: 50%;
		-webkit-transform: translate3d(-100%, -50%, 0);
		transform: translate3d(-100%, -50%, 0)
	}

	.pop--show.pop--left .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--right .pop__container {
		right: 0;
		top: 50%;
		left: auto;
		-webkit-transform: translate3d(100%, -50%, 0);
		transform: translate3d(100%, -50%, 0)
	}

	.pop--show.pop--right .pop__container {
		-webkit-transform: translate3d(0, -50%, 0);
		transform: translate3d(0, -50%, 0)
	}

	.pop--bottom .pop__container {
		top: auto;
		left: 50%;
		bottom: 0;
		-webkit-transform: translate3d(-50%, 100%, 0);
		transform: translate3d(-50%, 100%, 0)
	}

	.pop--show.pop--bottom .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}

	.pop--top .pop__container {
		top: 0;
		left: 50%;
		-webkit-transform: translate3d(-50%, -100%, 0);
		transform: translate3d(-50%, -100%, 0)
	}

	.pop--show.pop--top .pop__container {
		-webkit-transform: translate3d(-50%, 0, 0);
		transform: translate3d(-50%, 0, 0)
	}
</style>
